<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>支付金额：<text class="tui-pay-amuont">￥{{total_price}}</text></view>
				</view>
			</tui-list-cell>
			<radio-group @change="checks">
				<!-- #ifdef H5 -->
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" value="1" checked="checked"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif-->
				<!-- #ifdef H5 || APP-PLUS -->
				<tui-list-cell unlined>
					<label class="tui-pay-item istrue" :class="{'iswx':iswx}">
						<image src="/static/images/mall/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝支付</text>
						<view class="tui-radio">
							<radio color="#EB0909" value="2"></radio>
						</view>
					</label>
				</tui-list-cell>
				<!-- #endif-->
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" type="warning" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>


	</view>
</template>

<script>
	import {
		wxJsPay,
		isWxBrowser
	} from '@/utils/mixin';
	export default {
		name: 'tPayWay',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			page: {
				type: Number,
				default: 1
			},
			total_price: "",
			out_trade_no: '',
			balance: 0,
			iswx: false,

		},
		data() {
			return {
				pay_type: 1,
				pay_app: 'wap'

			};
		},
		methods: {
			wxPay(data) {

				if (isWxBrowser()) {
					let obj = {
						appId: data.appId,
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
					}
					let callback_succ_func = function() {
						this.tui.toast('支付成功');
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 800)
					};
					let callback_error_func = function() {
						this.tui.toast('支付失败');
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					};
					wxJsPay(obj, callback_succ_func, callback_error_func)
				} else {
					uni.showModal({
						title: "提示",
						content: "请使用微信打开进行支付",
						showCancel: false
					})
				}
			},
			close() {
				this.$emit("close", {})
			},
			checks(e) {
				this.pay_type = e.detail.value;
			},
			btnPay() {
				let token = this.tui.getToken();

				//#ifdef APP-PLUS
				this.pay_app = 'app';
				//#endif
				var pays = {
					token: token,
					money: this.total_price,
					pay_type: this.pay_type,
					pay_app: this.pay_app
				}
				let paytype = this.tui.request('user', 'post', pays, 1000, 1, '', 'balanceRecharge');
				Promise.resolve(paytype).then((value) => {
					if (this.pay_type == 2) {
						/* 假如是app的话 */

						//#ifdef APP-PLUS
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: value.data.ali_app_pay, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: function(res) {

							},
							fail: function(err) {

							}
						});
						return;
						//#endif
						// #ifdef H5
						//将接口返回的Form表单显示到页面
						document.querySelector('body').innerHTML = value;
						//调用submit 方法
						document.forms['alipaysubmit'].submit();
						// #endif
					}
					if (value.code == 10000) {
						this.close();
						// #ifdef H5
						// let ua = window.navigator.userAgent.toLowerCase()
						// if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						// 	//公众号支付
						// 	this.wxPay(value.data);
						// 	return;
						// }
						//#endif
						if (this.pay_type == 3) {
							uni.navigateTo({
								url: "../success/success?out_trade_no=" + this.out_trade_no
							})
						}
						//#ifdef APP-PLUS
						if(this.pay_type == 1){
							this.tui.toast('支付升级中');
							return;
						}
						
						//#endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							appid: value.data.appId,
							timeStamp: value.data.timeStamp,
							nonceStr: value.data.nonceStr,
							package: value.data.package,
							signType: 'MD5',
							paySign: value.data.paySign,
							success: (res) => {
								uni.showToast({
									title: "支付成功!"
								})
								uni.navigateTo({
									url: "../success/success?out_trade_no=" + this.out_trade_no
								})
							},
							fail: (res) => {
								this.tui.toast("取消支付");
								uni.navigateTo({
									url: "../success/success?out_trade_no=" + this.out_trade_no
								})
							},
							complete: () => {

							}
						})
						// #endif
						// #ifdef H5
						location.href = value.data.payInfo;
						// #endif
					} else {
						this.tui.toast(value.message);
					}
				})
				//this.tui.href("/pages/success/success")
			}
		}
	}
</script>

<style scoped>
	.tui-pay-item__title {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.istrue {
		display: block;
	}

	.iswx {
		display: none !important;
	}

	.tui-modal-box {
		padding: 100% !important;
	}

	.tui-pay-amuont {
		color: #ffad10;
		font-weight: 500;
		font-size: 34rpx;
	}

	.tui-modal-custom-text {
		text-align: center;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tui-pay-item {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.tui-list-cells {
		padding: 2rpx 0 !important;
		height: 90rpx;
	}

	.tui-pay-logo {
		width: 48rpx;
		height: 48rpx;
		margin-right: 15rpx;
	}

	.tui-radio {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	.tui-btn-pay {
		width: 100%;
		padding: 68rpx 35rpx 50rpx 35rpx;
		box-sizing: border-box;
	}

	.tui-recharge {
		color: #fc872d;
		margin-left: auto;
		padding: 12rpx 0;
	}
</style>
